<template>
  <div class="page_container">
    <PageTitle />
    <ScrollContainer>
      <Form
        :data="opts"
        :rows="4"
        :cols="2"
        label-width="100px"
        :mergeRow="[[1,1,1],[3,1,1]]"
        readonly
      >
        <template #type_source>
          <div class="slot_item">
            <span class="label_css">文章类型：</span>
            <el-input v-model="formObj.type" class="readonly" readonly></el-input>
          </div>
          <div class="slot_item">
            <span class="label_css">文章来源：</span>
            <el-input v-model="formObj.source" class="readonly" readonly></el-input>
          </div>
        </template>
        <template #img>
          <el-image
            v-if="imgPath"
            class="active_img stick"
            :src="imgPath"
            :preview-src-list="[imgPath]"
            fit="contain"
          ></el-image>
          <div class="no_active_img stick" v-else>
            暂无活动图片
          </div>
        </template>
        <template #contents>
          <div class="contents" v-html="formObj.contents"></div>
        </template>
      </Form>
      <template #btns>
        <el-button @click="toEdit" type="primary" round>
          修改
        </el-button>
        <el-button @click="back" round>
          返回
        </el-button>
      </template>
    </ScrollContainer>
  </div>
</template>

<script>
import { getInformationArticleDetail } from '@/api/home/information/informationArticle.js';
import { changeForm } from '@u/form.js';

export default {
  name: 'InformationArticleDetail',
  data() {
    return {
      id: this.$route.params.id,
      formObj: {
        type: '',
        source: '',
        image: 0,
        contents: '',
      },
      opts: {
        title: {
          label: '文章类型：',
          value: '',
          position: [1, 1],
        },
        type_source: {
          slot: true,
          position: [2, 1],
        },
        img: {
          slot: true,
          label: '文章头图：',
          position: [2, 2],
        },
        contents: {
          slot: true,
          label: '文章内容：',
          position: [3, 1],
        },
        createBy: {
          label: '发布人：',
          value: '',
          position: [4, 1],
        },
        createDate: {
          label: '发布时间：',
          value: '',
          position: [4, 2],
        },
      },
      imgPath: ''
    };
  },
  async created() {
    const res = {
      code: 200,
      data: {
        title: '标题标题标题标题',
        typeObj: {
          id: 2,
          name: '通知公告',
        },
        source: '来源来源来源',
        imageObj: {
          id: 267,
          path: 'http://192.168.1.136:4010//UploadFile/File/6c7766d2-1207-4b10-97c2-1945921f0500.png',
        },
        contents: '<p>内容内容</p>',
        createBy: '小明',
        createDate: '2021-06-06',
      }
    };
    // await getInformationArticleDetail(this.id).then(res => {
    if (res.code == 200) {
      this.formObj.type = res.data.typeObj.name;
      this.formObj.source = res.data.source;
      this.imgPath = res.data.imageObj.path;
      this.formObj.source = res.data.source;
      this.formObj.contents = res.data.contents;
      changeForm(this.opts, res.data, true);
    }
    // });
  },
  methods: {
    toEdit() {
      this.$router.push({
        name: 'InformationArticleEdit',
        params: {
          from: {
            name: 'InformationArticleDetail'
          }
        }
      });
    },
    back() {
      this.navigateBack({
        to: {
          name: 'InformationArticle',
        },
        from: this.$route.params.from,
        params: {
          removeTagViews: ['InformationArticleDetail']
        }
      });
    },
  },
  components: {
    Form: () => import('@c/Form.vue')
  }
};
</script>

<style lang="scss" scoped>
.label_css {
  width: 100px;
}
.contents {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 10px;
}
.active_img, .no_active_img {
  width: 120px;
  height: 120px;
}
.no_active_img {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #606266;;
  border: 1px solid #dcdfe6;
}
</style>
